<template>
  <div class="allpage">
    <el-form ref="searchForm" v-model="search" class="search" :inline="true">
      <el-form-item label="标题" prop="title">
        <el-input v-model="search.title" placeholder="请输入页面名称" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="search.status">
          <el-option value="publish" label="已发布" />
          <el-option value="draft" label="草稿" />
        </el-select>
      </el-form-item>
      <el-form-item label="分类" prop="category">
        <el-select v-model="search.category">
          <el-option
            v-for="(item, index) in classifyList"
            :key="index"
            :label="item.label"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">查询</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="from">
      <section class="action">
        <div>
          <p v-show="showAction">
            <el-button>发布</el-button>
            <el-button>草稿</el-button>
            <el-button>首焦推荐</el-button>
            <el-button>撤回首焦</el-button>
            <el-button type="danger">删除</el-button>
          </p>
        </div>
        <div>
          <el-button type="primary" @click="built">新建</el-button>
          <svg
            viewBox="64 64 896 896"
            focusable="false"
            data-icon="reload"
            width="1em"
            height="1em"
            fill="currentColor"
            aria-hidden="true"
            @click="submitForm"
          >
            <path
              d="M909.1 209.3l-56.4 44.1C775.8 155.1 656.2 92 521.9 92 290 92 102.3 279.5 102 511.5 101.7 743.7 289.8 932 521.9 932c181.3 0 335.8-115 394.6-276.1 1.5-4.2-.7-8.9-4.9-10.3l-56.7-19.5a8 8 0 00-10.1 4.8c-1.8 5-3.8 10-5.9 14.9-17.3 41-42.1 77.8-73.7 109.4A344.77 344.77 0 01655.9 829c-42.3 17.9-87.4 27-133.8 27-46.5 0-91.5-9.1-133.8-27A341.5 341.5 0 01279 755.2a342.16 342.16 0 01-73.7-109.4c-17.9-42.4-27-87.4-27-133.9s9.1-91.5 27-133.9c17.3-41 42.1-77.8 73.7-109.4 31.6-31.6 68.4-56.4 109.3-73.8 42.3-17.9 87.4-27 133.8-27 46.5 0 91.5 9.1 133.8 27a341.5 341.5 0 01109.3 73.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.6 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c-.1-6.6-7.8-10.3-13-6.2z"
            />
          </svg>
        </div>
      </section>

      <el-table
        v-loading="loading"
        :data="artilceAllList"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column fixed prop="title" label="标题" width="150" />
        <el-table-column prop="status" label="状态" width="150">
          <template slot-scope="scope">
            <p>{{ scope.row.status === "draft" ? "草稿" : "已发布" }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="category.label" label="分类" width="100" />
        <el-table-column prop="tags[0].value" label="标签" width="100" />
        <el-table-column prop="views" label="阅读量" width="150" />
        <el-table-column prop="likes" label="喜欢数" width="150" />
        <el-table-column label="发布时间" width="270">
          <template slot-scope="scope">
            <p>{{ scope.row.publishAt |moment }}</p>
          </template>
        </el-table-column>
        <el-table-column class="dj" fixed="right" label="操作" width="230">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row)"
              >编辑</el-button
            >
            <el-button type="text" size="small">撤回首焦</el-button>
            <el-button type="text" size="small">查看访问</el-button>
            <el-button type="text" size="small" @click="del(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      :current-page="1"
      :page-sizes="[3, 6, 9, 12]"
      :page-size="3"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { getArtilceDel } from '@/api/artilce/all.js'
import { Message } from 'element-ui'
import { mapState, mapActions } from 'vuex'
export default {
  data() {
    return {
      search: {
        title: '',
        category: '',
        status: ''
      },
      page: 1,
      loading: false,
      showAction: false,
      pageSize: 12,
      visible: false
    }
  },
  computed: {
    ...mapState({
      pageCount: (state) => state.all.pagecount,
      artilceAllList: (state) => state.all.artilceAllList,
      classifyList: (state) => state.all.classifyList
    })
  },
  created() {
    this.submitForm()
    this.getClassify()
  },
  methods: {
    ...mapActions({
      getArtilceAll: 'all/getArtilceAll',
      getArtilceDel: 'all/getArtilceDel',
      getClassify: 'all/getClassify'
    }),

    // 编辑页面
    handleClick(row) {
      this.$router.push({
        path: `/artilce/editor/${row.id}`,
      });
    },

    // 重置
    reset() {
      this.search.title = "";
      this.search.category = "";
      this.search.status = "";
      this.submitForm();
    },

    // 刷新
    async submitForm() {
      this.loading = true;
      const options = {};
      for (const key in this.search) {
        this.search[key] && (options[key] = this.search[key]);
      }
      await this.getArtilceAll({ page: this.page, ...options }),
        (this.loading = false);
    },

    // 点击复选框显示选项
    handleSelectionChange(selection) {
      this.showAction = !!selection.length;
    },

    // 删除
    async del(id) {
      console.log(id);
      const result = await getArtilceDel(id);
      if (result.statusCode == 200) {
        this.submitForm();
        Message.success("删除成功");
      } else {
        Message.error("删除失败");
      }
    },

    // 分页
    async handleSizeChange(val) {
      this.pageSize = val
      const options = {}
      await this.getArtilceAll({
        page: this.page,
        pageSize: this.pageSize,
        ...options
      }),
      console.log(`每页 ${val} 条`)
    },
    async handleCurrentChange(val) {
      this.page = val
      const options = {}
      await this.getArtilceAll({
        page: this.page,
        pageSize: this.pageSize,
        ...options
      }),
      console.log(`当前页: ${val}`)
    },

    // 新建页面
    built() {
      this.$router.push({
        path: "/artilce/editor",
      });
    },
  },
};
</script>

<style lang="scss">
.allpage {
  background: #f5f5f5;
  height: 100%;
}
.search {
  width: 95%;
  height: 170px;
  background: #fff;
  margin: 0 auto;
  margin-bottom: 30px;
  text-align: center;
  box-shadow: 10px 10px 5px#DCDCDC;
}

.from {
  width: 95%;
  margin: 0 auto;
}
.dj {
  text-align: center;
}
.action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  button {
    margin-right: 15px;
  }
  div {
    font-size: 0;
    display: flex;
    align-items: center;
  }
  div:nth-child(2) {
    margin-right: 50px;
  }
  svg {
    font-size: 16px;
  }
  margin: 10px 0;
}
</style>
